<template>
  <crumbs></crumbs>
  <div class="wrapper">
    <areaSelect
      :tree-data="data.treeData"
      :tree-props="treeProps"
      nodeKey="regionCode"
      @onConfirm="onConfirmHandle"
    ></areaSelect>
  </div>
</template>

<script setup lang="ts">
import areaSelect from '@/components/areaSelect/Index.vue'
import { getAreaData } from '@/assets/api/index'
import { reactive } from 'vue'
import { ElMessageBox } from 'element-plus'

const data = reactive({
  treeData: []
})

const treeProps = {
  children: 'children',
  label: 'regionName'
}

getAreaData().then(res => {
  data.treeData = res.data
  console.log(data.treeData)
})

const onConfirmHandle = (v: any) => {
  console.log(v)
  ElMessageBox.confirm('您当前选中的是' + v.map((x: any) => x.regionName).join('、'), '请确认')
}
</script>
